<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>登录</title>
	</head>
	<style>
		* {
			margin: 0px;
			padding: 0px;
		}

		.login {
			width: 500px;
			margin: 10px auto;
		}

		.login1,
		.login2 {
			border: 1px solid #904223;
			float: left;
		}

		.login div {
			margin: 20px;
			text-align: center;
			vertical-align: middle;
		}

		.login div span {
			font-size: 1.2em;
		}

		.login div input {
			height: 30px;
		}

		.login div button {
			padding: 20px;
		}
	</style>
	<body>
		<div class="login">
			<div class="login1">
				<form action="loginResult.jsp">
					<div>
						<span>账号</span>
						<input type=text id=userName name=userName />
					</div>
					<div>
						<span>密码</span>
						<input type=text id=password name=password />
					</div>
					<div><button type="submit">普通登录</button></div>
				</form>
			</div>
			<div class="login2">
				<form>
					<div>
						<span>账号</span>
						<input type=text id=user name=user />
					</div>
					<div>
						<span>密码</span>
						<input type=text id=psw name=psw />
					</div>
					<div id="loginResult"></div>
					<div><button type="button" onclick="loginAjax()">Ajax登录</button></div>
				</form>
			</div>
		</div>
		<script>
			var http_request = false;

			function loginAjax() {
				var user = document.getElementById("user").value;
				var psw = document.getElementById("psw").value;
				var url = "loginAjax.jsp?userName=" + user + "&password=" + psw;
				console.log('url:'+url);
				if (window.XMLHttpRequest) { // Mozilla, Safari,...
					http_request = new XMLHttpRequest();
					if (http_request.overrideMimeType) {
						http_request.overrideMimeType('text/xml');
					}
				} else if (window.ActiveXObject) { // IE
					try {
						http_request = new ActiveXObject("Msxml2.XMLHTTP");
					} catch (e) {
						try {
							http_request = new ActiveXObject("Microsoft.XMLHTTP");
						} catch (e) {}
					}
				}

				if (!http_request) {
					console.log('Giving up :( Cannot create an XMLHTTP instance');
					return false;
				}
				http_request.onreadystatechange = showLoginResult;
				http_request.open('GET', url, true);
				http_request.send(null);
			}

			function showLoginResult() {
				var loginResult = document.getElementById("loginResult");
				if (http_request.readyState == 4) {
					if (http_request.status == 200) {
						console.log(http_request.responseText.trim());
						if(http_request.responseText.trim()=="1")
						{
						    loginResult.innerHTML = "用户名不存在";
							loginResult.style.color="#ff5500";
						}
						if(http_request.responseText.trim()=="2")
						{
						    loginResult.innerHTML = "密码不对";
							loginResult.style.color="#ff5500";
						}
						if(http_request.responseText.trim()=="0")
						{
						    loginResult.innerHTML = "登录成功";
							loginResult.style.color="#2a9f0f";
						}
						
					} else {
						console.log('http_request.status:' + http_request.status);
					}
				}

			}
		</script>
	</body>
</html>
